<template>
<div>
    <div class="banner-wrap" @click="handleGalleryClick">
        <div class='img-box'>
            <img src="../../assets/images/banner01.jpg" alt="">
        </div>
        <div class='img-text'>
            <div class="content">{{sightName}}</div>
            <div class='icon-box'>
                <i class='iconfont'>&#xe625;</i>{{bannerImgNum}}
            </div>
        </div>
    </div>
    <fade-animation>
        <common-gallery :images="galleryImgs" v-show="showGallery" @close="handleGalleryClose"></common-gallery>
    </fade-animation>
    <detail-header></detail-header>
</div>
</template>
<script>
import FadeAnimation from "common/animation/Fade.vue"
import CommonGallery from "common/gallery/Gallery.vue"
import DetailHeader from "components/detail/Header.vue"
export default {
    name:"DetailBanner",
    props:{
       sightName:String,
       bannerImg:String,
       galleryImgs:Array
    },
    data () {
        return{
            showGallery:false
        }
    },
    computed :{
       bannerImgNum (){
           return this.galleryImgs.length
       }
    },
    components:{
        CommonGallery,
        DetailHeader,
        FadeAnimation
    },
    methods:{
        handleGalleryClick (){
            this.showGallery=true
        },
        handleGalleryClose (){
            this.showGallery=false
        }
    }
}
</script>
<style lang="scss" scoped>
@import "~styles/_parameters.scss";
@import "~styles/mixins.scss";
.banner-wrap{
    position:relative;
    width:100%;
}
.img-box{
    width:100%;
    height:0;
    overflow:hidden;
    padding-bottom:55.5%;
    background-color:$bgNormal;
    img{
        width:100%;
    }
}
.img-text{
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    display:flex;
    padding:.1rem;
    font-size:small;
    // background-color:rgba(#000,.3);
    background-image:linear-gradient(45deg,transparent,rgba(#000,.3));
    color:#fff;
    .content{
        @extend %ellipsis;
        width:100%;
    }
    .icon-box{
        width:1rem;
        text-align:right;
        .iconfont{
            // display:inline-block;
            margin-right:.1rem;
        }
    }
}
</style>

